<template>
  <div class="clearfix">
    <loading-outlined v-if="true" />
    <p v-for="i in fileList">
      {{ i.name }}
      <a-button @click="fileList = []">点我删除</a-button>
    </p>

    <a-upload
      v-model:file-list="fileList"
      name="file"
      list-type="picture-card"
      :show-upload-list="false"
      action="http://127.0.0.1:4523/m1/1981717-0-default/uploadPic"
      :before-upload="beforeUpload"
      @change="handleChange"
    >
      <div class="relative" v-if="fileList?.length == 1" @click.stop>
        <img src="/pic.jpg" alt="" />
        <div
          class="absolute w-full h-full left-0 top-0 flex items-center justify-center bg-[#a3a3a3] opacity-0 hover:opacity-90"
        >
          <a-button>预览</a-button>
          <a-button class="ml-4">删除</a-button>
        </div>
      </div>
      <!-- <div class="bg-red-300" @click.stop v-if="fileList.length == 1">asdf</div> -->
      <div v-if="fileList.length < 1" class="asdfasdf">
        <plus-outlined />
        <div>Upload</div>
      </div>
    </a-upload>
    <a-modal
      :visible="previewVisible"
      :title="previewTitle"
      :footer="null"
      @cancel="handleCancel"
    >
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
    <!-- <p>{{ fileList }}</p> -->
  </div>
</template>
<script lang="ts">
import {
  PlusOutlined,
  UploadOutlined,
  LoadingOutlined,
} from "@ant-design/icons-vue";
import { defineComponent, ref } from "vue";
import { message, UploadProps } from "ant-design-vue";
import { UploadChangeParam, UploadFile } from "ant-design-vue/es";

function getBase64(file: File) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}

export default defineComponent({
  components: {
    PlusOutlined,
    UploadOutlined,
    LoadingOutlined,
  },
  setup() {
    const previewVisible = ref(false);
    const previewImage = ref("");
    const previewTitle = ref("");

    const fileList = ref<UploadProps["fileList"]>([]);

    const handleCancel = () => {
      previewVisible.value = false;
      previewTitle.value = "";
    };
    const handlePreview = async (file: UploadFile) => {
      if (!file.url && !file.preview) {
        file.preview = (await getBase64(file.originFileObj)) as string;
      }
      previewImage.value = file.url || file.preview;
      previewVisible.value = true;
      previewTitle.value =
        file.name || file.url.substring(file.url.lastIndexOf("/") + 1);
    };

    const msg = ref("demo");
    msg.value = "demo2";

    const loading = ref(false);
    const handleChange = (info: UploadChangeParam) => {
      if (info.file.status === "uploading") {
        loading.value = true;
        return;
      }
      if (info.file.status === "done") {
        // imageUrl.value = (fileList.value[0] as any).response.result;
        const url = (fileList.value[0] as any).response.result;
        emit("update:value", url);
        fetchBlobPic(url);
        loading.value = false;
      }
      if (info.file.status === "error") {
        message.error("上传出错");
      }
    };

    const beforeUpload = async (file) => {
      // 限定数量，每次上传清空文件列表
      fileList.value = [];
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        message.error("只能上传图片格式");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        message.error("图片必须小于2MB!");
      }
      return isJpgOrPng && isLt2M;
    };

    return {
      previewVisible,
      previewImage,
      fileList,
      handleCancel,
      handlePreview,
      previewTitle,
      handleChange,
      beforeUpload,
    };
  },
});
</script>
<style scoped>
/deep/ .ant-upload-select-picture-card {
  width: 300px;
  height: 300px;
}
</style>
